<script setup>
import {reactive, ref} from "vue";
import axios from "axios";
import uu from "@/util/uu";
import {ElMessage} from "element-plus";
import {Message} from "@element-plus/icons-vue";

//表格数据
let info = reactive({
  list:[],       // 报案集合信息
  policyList:[],       // 报案集合信息
  pages:0,
  total:0,
  // 报案编号
  claimReportId : "",
  // 删除对抗框 状态
  dialogDelVisible:false,
// 报案信息数据
  sel:{
    pageNum:1,
    pageSize:5,
  },
// 保单信息
  policy:{

  },
  form:{ // 所有的表单数据

  },
//   开启对话框
  dialogVisible:false,
//   操作是否成功
  success :false,
//   是否在添加
  isAdd:false,
//   打开查询对话款
  openQueryPolicy:false,

  // redisObjForProvince:{}, // 单独的省份对象
  // redisObjForCity:{}, // 单独的城市对象
  // redisObjForDistrict:{}, // 单独的市区对象键

  redisValeusForProvinceList:[], // 省份信息
  redisValeusForCityList:[], // 城市信息
  redisValeusForDistrictList:[], // 市区信息
})
// 获取报案数据
const queryAll = () => {
  console.log("开始查询数据")
  console.log("传递的参数为"+JSON.stringify(info.sel))
  // http://localhost:8080
  uu.post("/busClaimReport/pageList",info.sel).then(result =>{
    info.list = result.data.list;
    info.sel.pageNum = result.data.pageNum;
    info.sel.pageSize = result.data.pageSize;
    info.total = result.data.total;
    console.log("接收到的数据为"+JSON.stringify(result.data));
    // console.log(result);
  })
}
// 查询
queryAll()

// 改变页数
const pagesChange = (value) => {
  // alert(value)
  //  console.log(value)
  info.pages = value;
  queryAll();
}


// 删除报案数据
const handleDelete = (ruleFormRef) => {
  if (!ruleFormRef) return; // 为空就结束，直观效果就是不允许点击
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      // alert(info.sel.claimReportId)
      uu.delete("/busClaimReport/remove",{
        params:{
          claimReportId : info.sel.claimReportId,
          cancellationReason : info.sel.cancellationReason,
        }
      }).then(result =>{
        // alert(result.message)
        if (result.ok){
          info.success = true; // 显示成功提示
          ElMessage({
            message:result.message,
            type:"success",
          })
          // 关闭对话框
          info.dialogDelVisible = false;
          // 清楚数据
          info.sel = {}
          // 刷新页面
          queryAll()
        }else {
          ElMessage.error(result.message)// 显示失败提示
        }
        // alert(info.success)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 获取随机生成的保单编号
const getClaimReportId = () => {
  uu.get("/busClaimReport/claimReportId").then(result =>{
    // 赋值到报案信息的 报案编号字段
    info.sel.claimReportId = result.data;
    // 赋值给 预备的报案编号
    info.claimReportId = result.data;
  })
}

// 开启添加删除对话框
const dialogBox = (isAdd,id) => {
  info.dialogVisible = true;
  if (isAdd === false){ // 此为修改对话框
    console.log("修改对话框展开")
    // 根据id获取用户数据
    uu.get("/busClaimReport/getById/"+id).then(result =>{
      info.sel = result.data;
      console.log(result.data)
      if (info.sel.provinceId != null && info.sel.cityId != null && info.sel.districtId != null){
        // 查询省市区
        getAreaAll();
      }
    })
    // 因为请求发送之后会刷新页面，所以这里就把 data.form 的值进行清空，以免带有自己不想要的值去执行queryAll()方法
    info.sel = {}
  }else { // 此为添加对话框
    getProvinces() // 查询所有省
    console.log(info.sel.provinceId)
    // 获取关键的保单编号
    console.log("添加对话框展开")
    getClaimReportId()
  }
  // 将值传递到视图，然后视图判断要显示那些文字， 以及提交时调用那个方法。
  info.isAdd = isAdd;
}

// 添加
const save = (ruleFormRef) => {
  // 重置验证规则，因为子对话框关闭之后再次到达主对话框可能会导致验证规则残留
  // ruleFormRef.resetFields();

  // ruleFormRef 代表验证规则
  if (!ruleFormRef) return; // 为空就结束，直观效果就是不允许点击
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      uu.post("/busClaimReport/add", info.sel).then(result => {
        if (result.ok) {
          info.dialogVisible = false; // 关闭添加页面
          //   需要补上 增加成功的提示
          ElMessage({
            message: result.message,
            type: "success",
          })
        } else {
          ElMessage.error(result.message)
        }
        /*
            清除残留验证规则信息，让下次打开不会有上次的残留信息
            特别注意，ref的东西，在外部引用要加value，内部不用加，
            例如这里的参数就有 ruleFormRef ，所以就不用加value，否则就会出现未定义的错误。
         */
        ruleFormRef.resetFields();
        info.sel = {}; // 清楚已有缓存，因为其他区域也在使用该对象数据。
        // 重新刷新页面
        queryAll()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//  修改
const handleEdit = (ruleFormRef) => {
  /*
      validate() 表单验证方法，用于验证规则是否被满足
      valid 表示验证的结果  fields 包含验证失败的错误信息
   */
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      uu.put("/busClaimReport/update/",info.sel).then(result =>{
        // info.success = result.ok;
        if (result.ok){
          ElMessage({
            message:result.message,
            type:"success"
          })
          //   清除缓存
          info.sel = {}
          //   刷新页面
          queryAll()
          //   关闭对话框
          info.dialogVisible = false;
        }else {
          ElMessage.error(result.message)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 添加报案时的保单查询按钮事件
const openQueryPolicy = () => {
  // 打开对话框
  info.openQueryPolicy = true;
}
// 查询保单信息
const queryPolicy = () => {
  console.log("开始查询数据")
  console.log("传递的参数为"+JSON.stringify(info.policy))
  // http://localhost:8080
  uu.get("/BusInsurancePolicyController/getPlicylist",{
    params:{
      insuredId:info.policy.insuredId
    }
  }).then(result =>{
    info.policyList = result.data;
    console.log("接收到的数据为"+JSON.stringify(result.data));
    // console.log(result);
  })


}
// 关闭 添加删除对话款 对话框并清除数据
const handleClose = () => {
  info.sel={}; // 清除数据
  info.dialogVisible=false // 关闭对话框
  // 清除残留验证规则信息，让下次打开不会有上次的残留信息
  ruleFormRef.value.resetFields();
}


// 关闭 查询保单对话框事件
const handleCloseQueryPolicy = (row) => {
  // 重置验证规则，因为子对话框关闭之后再次到达主对话框可能会导致验证规则残留
  ruleFormRef.value.resetFields();
  info.openQueryPolicy=false // 关闭对话框
  // 返回信息到 info.sel 里，目的是在“删除对话款”中进行显示
  info.sel.policyNumber = row.policyNumber;
  info.sel.contactPhone = row.contactNumber;
  info.sel.damagedSubject = row.cropType;
  info.sel.lossAddress = row.address;
  info.sel.contactPerson = row.insuredName;
  // 重置规则的同时也会重置也有信息 这里为了保证两次的报案编号一致，所以这里就用备用的id再次给 info.sel.claimReportId 进行赋值
  info.sel.claimReportId = info.claimReportId;
}

// 关闭 查询删除对话框事件
const dialogDelVisible = () => {
  // 重置验证规则，因为子对话框关闭之后再次到达主对话框可能会导致验证规则残留
  ruleFormRef.value.resetFields();
  // 关闭对话框
  info.dialogDelVisible= false;

}

// 开启删除对话框
const openDelDialogue = (id) => {
  // 开启对话框
  info.dialogDelVisible = true;
  // 给id赋值
  info.sel.claimReportId = id;
}

// 查询所有的省份地区信息
const getProvinces = () => {
  // 省份都存在位于 0 的 Hash 类型的key下
  uu.get("/hupRegion/getAreaForRedis/0").then(result =>{
    if (result.code === 200){
      // alert(JSON.stringify(result.data))
      console.log("数据信息为"+JSON.stringify(result.data))
      info.redisValeusForProvinceList = result.data;
    }
    console.log(result.message)
  })
}
// 查询所有的城市地区信息
const getCitys = () => {
  // 清除上一次查询后的残留数据
  info.redisValeusForCityList = [];
  // alert(info.sel.provinceId)
  // 城市地区都存在位于 省份 的 Hash 类型的key下
  uu.get("/hupRegion/getAreaForRedis/"+info.sel.provinceId).then(result =>{
    if (result.code === 200){
      // alert(JSON.stringify(result.data))
      console.log("数据信息为"+JSON.stringify(result.data))
      info.redisValeusForCityList = result.data;
    }
    console.log(result.message)
  })
}
// 查询所有的区级地区信息
const getDistricts = () => {
  // 清除上一次查询后的残留数据
  info.redisValeusForDistrictList = [];
  // 区级地区都存在位于 具体城市 的 Hash 类型的key下
  uu.get("/hupRegion/getAreaForRedis/"+info.sel.cityId).then(result =>{
    if (result.code === 200){
      // alert(JSON.stringify(result.data))
      console.log("数据信息为"+JSON.stringify(result.data))
      info.redisValeusForDistrictList = result.data;
    }
    console.log(result.message)
  })
}

// 查询所有的省地区信息
const getAreaAll = () => {
  //alert("开始查询所有的省地区信息 ")
  // 区级地区都存在位于 具体城市 的 Hash 类型的key下
  uu.get("/hupRegion/getAllAreaForRedis/",{
    params:{
        pid:info.sel.provinceId,
        cid:info.sel.cityId,
    }
  }).then(result =>{
    if (result.code === 200){
      // 清除残留信息
      // info.redisValeusForProvinceList = [];
      // info.redisValeusForCityList = [];
      // info.redisValeusForDistrictList = [];
      // alert("数据信息为"+JSON.stringify(result.data))
      // console.log("数据信息为"+JSON.stringify(result.data))
      console.log("数据信息为"+result.data)
      // 将查询到的省市区信息放入到对应的集合里
      info.redisValeusForProvinceList = result.data.pList;
      info.redisValeusForCityList = result.data.cList;
      info.redisValeusForDistrictList = result.data.dList;
      console.log("redisValeusForDistrictList"+JSON.stringify(info.redisValeusForDistrictList))
    }
  })
}
// 查询单独的省份地区信息

// 查询单独的省份地区信息

// 添加保单验证规则
const ruleFormRef = ref(); // 引用表单组件
const rules = reactive({  // 验证规则对象，存储验证规则。
  claimReportId: [
    { required: true, message: '请填写保单编号', trigger: 'blur' },
  ],
  policyNumber: [
    { required: true, message: '请核对保单号', trigger: 'blur' },
  ],
  contactPerson: [
    { required: true, message: '请填写保单联系人', trigger: 'blur' },
  ],
  contactPhone: [
    { required: true, message: '请填写保单联系电话', trigger: 'blur' },
  ],
  causeOfLoss: [
    { required: true, message: '请填写报案出险原因', trigger: 'blur' },
  ],
  lossAddress: [
    { required: true, message: '请填写保单出险地址', trigger: 'blur' },
  ],
  damagedSubject: [
    { required: true, message: '请填写受损标的信息', trigger: 'blur' },
  ],
  damageQuantity: [
    { required: true, message: '请填写报损数量', trigger: 'blur' },
  ],
  disasterInfoId: [
    { required: true, message: '请填写受灾编号', trigger: 'blur' },
  ],
  reportMethod: [
    { required: true, message: '请选择报案方式', trigger: 'change' },
  ],
  reportTime: [
    { type:'date', required: true, message: '请选择报案时间', trigger: 'change' },
  ],
  lossTime: [
    { type:'date', required: true, message: '请选择出险时间', trigger: 'change' },
  ],
  // 删除原因
  cancellationReason :[
    {  required: true, message: '请输入删除原因', trigger: 'blur' },
  ],
  province: [
    {  required: true, message: '请选择省份', trigger: 'change' },
  ],
  city: [
    {  required: true, message: '请选择城市', trigger: 'change' },
  ],
  district: [
    {  required: true, message: '请选择市区', trigger: 'change' },
  ],
})
</script>

<template>
<!--  ------------------------- 报案组件 ------------------------------------------ -->
  <div style="width: 100%;height: 100%">
    <!-- 便捷查询区域-->
    <div class="container">
      <el-form :inline="true" :model="info.sel" class="demo-form-inline" style="width: 100%">
        <el-form-item label="报案编号">
          <el-input v-model="info.sel.claimReportId"  placeholder="请输入准确信息"/>
        </el-form-item>
        <el-form-item label="保单编号">
          <el-input v-model="info.sel.policyNumber"  placeholder="请输入准确信息"/>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="info.sel.contactPerson"  placeholder="请输入准确信息"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="info.sel.contactPhone"  placeholder="请输入准确信息"/>
        </el-form-item>

        <el-row>
          <el-form-item label="报案起始时间">
            <el-col :span="11">
              <el-date-picker
                  v-model="info.sel.start"
                  type="date"
                  format="YYYY-MM-DD "
                  value-format="YYYY-MM-DD "
                  width="50%"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="报案结束时间">
            <el-col :span="11">
              <el-date-picker
                  v-model="info.sel.end"
                  type="date"
                  format="YYYY-MM-DD "
                  value-format="YYYY-MM-DD "
                  width="50%"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryAll()">报案信息查询</el-button>
          </el-form-item>
          <el-button type="danger" class="move-right" @click="dialogBox(true)">报案</el-button>
        </el-row>
      </el-form>
      <!--  添加和修改区域    -->
<!--      <el-button type="danger" class="move-right" @click="dialogBox(true)">报案</el-button>-->
      <br><br>
      <!--对话框-->
      <!-------------------------------- 对话框操作数据(增加或修改) -------------------------------->
      <el-dialog
          v-model="info.dialogVisible"
          :title="info.isAdd?'增加报案信息':'修改报案信息'"
          width="40%"
          :before-close="handleClose"
          draggable
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <!--存放数据-->
        <el-form
            :model="info.sel"
            ref="ruleFormRef"
            :rules="rules"
            label-width="140px"
            >
<!--          -->
          <el-form-item label="保单编号" prop="claimReportId">
            <el-input style="width:240px" v-model="info.sel.claimReportId" />
          </el-form-item>
          <el-form-item label="保单号" prop="policyNumber">
            <el-input style="width:240px" v-model="info.sel.policyNumber" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" @click="openQueryPolicy()">查询保单</el-button>
          </el-form-item>
          <el-form-item label="联系人" prop="contactPerson">
            <el-input  style="width:240px" v-model="info.sel.contactPerson" />
          </el-form-item>
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input  style="width:240px" v-model="info.sel.contactPhone" />
          </el-form-item>
          <el-form-item label="报案出险原因" prop="causeOfLoss">
            <el-input  style="width:240px" v-model="info.sel.causeOfLoss" />
          </el-form-item>
          <el-form-item label="受损标的" prop="damagedSubject">
            <el-input  style="width:240px" v-model="info.sel.damagedSubject" />
          </el-form-item>
          <el-form-item label="报损数量" prop="damageQuantity">
            <el-input style="width:240px" v-model="info.sel.damageQuantity" />
          </el-form-item>
          <el-form-item label="受灾信息编号" prop="disasterInfoId">
            <el-input style="width:240px" v-model="info.sel.disasterInfoId" />
          </el-form-item>
          <el-form-item label="报案方式" prop="reportMethod">
            <el-radio-group v-model="info.sel.reportMethod">
              <el-radio :label="0" >现场报案</el-radio>
              <el-radio :label="1" >电话报案</el-radio>
              <el-radio :label="2">app报案</el-radio>
              <el-radio :label="3">其他</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="报案时间" prop="reportTime">
            <el-col :span="11">
              <el-date-picker
                  v-model="info.sel.reportTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
              />
            </el-col>
          </el-form-item>
          <!--    省市区   省选择完去查询所有的市    -->
          <el-form-item
              label="省份"
              prop="provinceId">
            <el-select
                v-model="info.sel.provinceId"
                filterable
                remote
                reserve-keyword
                remote-show-suffix
                @change="getCitys()"
                placeholder="请选择省份">
              <el-option v-for="item in info.redisValeusForProvinceList"  :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <!--   城市选择完去查询所有的市区       -->
          <el-form-item label="城市" prop="cityId">
            <el-select
                v-model="info.sel.cityId"
                filterable
                remote
                reserve-keyword
                remote-show-suffix
                @change="getDistricts()"
                placeholder="请选择城市">
              <el-option v-for="item in info.redisValeusForCityList"  :label="item.name"  :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="市区" prop="districtId">
            <el-select
                v-model="info.sel.districtId"
                filterable
                remote
                reserve-keyword
                remote-show-suffix
                placeholder="请选择市区">
              <el-option v-for="item in info.redisValeusForDistrictList"  :label="item.name"  :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="报案出险地址" prop="lossAddress">
            <el-input style="width:300px" v-model="info.sel.lossAddress" />
          </el-form-item>
          <el-form-item label="出险时间" prop="lossTime">
            <el-col :span="11">
              <el-date-picker
                  v-model="info.sel.lossTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"/>
            </el-col>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary"  @click="info.isAdd?save(ruleFormRef):handleEdit(ruleFormRef)">
          提交
        </el-button>
      </span>
        </template>
      </el-dialog>
      <br><br>
<!--  ------------------------- 查询保单对话款区域 --------------------------------------------    -->
      <el-dialog
          v-model="info.openQueryPolicy"
          title="查询保单信息"
          width="50%"
          :before-close="handleCloseQueryPolicy"
          center
      >
        <el-form
            :model="info.policy"
        >
          <el-form-item label="身份证号" label-width="100px" >
            <!--    使用棚式布局来实现 块在同一行        -->
            <div style="display: flex; align-items: center; width: 80%" >
             <el-input  v-model="info.policy.insuredId"  placeholder="请输入准确信息" style="flex: 1;width: 100px !important;"></el-input>
              <el-button type="primary" @click="queryPolicy()" style="margin-left: 10px;">核对保单</el-button>
            </div>
          </el-form-item>
        </el-form>
        <!--    保单表格数据信息    -->
        <el-table :data="info.policyList" border style="width: 100%">
          <el-table-column label="保单号"  prop="policyNumber" fixed width="120" />
          <el-table-column label="投保人姓名" prop="insuredName" width="120" />
          <el-table-column label="联系电话" prop="contactNumber" width="120" />
          <el-table-column label="农作物种类" prop="cropType" width="120" />
          <el-table-column label="报案人地址" prop="address" width="500" />
          <el-table-column label="操作" fixed="right" width="120">
            <template #default="scope">
              <!-- 点击开启对话框 -->
              <el-button size="small" type="danger"  @click="handleCloseQueryPolicy(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!-- 表格
              ERROR
              data.includes is not a function 这里希望接收的是一个数组，而不是对象，如果想要将单个对象放入的话，就把对象放到数组里。 -->
    <el-table :data="info.list" border style="width: 100%; " >
      <el-table-column label="序号" type="index" fixed width="80" height="100" />
      <el-table-column label="报案号" prop="claimReportId" fixed width="200" height="100" />
      <el-table-column label="保单号" prop="policyNumber" width="120" />
      <el-table-column label="联系人" prop="contactPerson" width="120" />
      <el-table-column label="联系电话" prop="contactPhone" width="120" />
      <el-table-column label="报案出险原因" prop="causeOfLoss" width="120" />
      <el-table-column label="报案出险地址" prop="lossAddress" width="120" />
<!--      <el-table-column label="报案方式" prop="reportMethod" width="120" />-->
      <el-table-column label="报案方式" prop="reportMethod" width="150" >
        <template #default="scope">
          <el-text :label="0" v-model="scope.row.reportMethod" v-if=" scope.row.reportMethod ===0">现场报案</el-text>
          <el-text :label="1" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===1">电话报案</el-text>
          <el-text :label="2" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===2">app报案</el-text>
          <el-text :label="3" v-model="scope.row.reportMethod" v-else-if=" scope.row.reportMethod ===3">其他</el-text>
        </template>
      </el-table-column>
      <el-table-column label="受损标的" prop="damagedSubject" width="120" />
      <el-table-column label="报损数量" prop="damageQuantity" width="120" />
      <el-table-column label="报案时间" prop="reportTime" width="120" />
      <el-table-column label="出险时间" prop="lossTime" width="120" />
      <el-table-column label="受灾信息编号" prop="disasterInfoId" width="120" />
      <el-table-column label="操作" fixed="right" width="150" >
        <template #default="scope">
          <!-- 点击开启对话框 -->
          <el-button
              size="small"
              type="warning"
              @click="dialogBox(false,scope.row.claimReportId)"
          >修改
          </el-button>
<!--     <el-popconfirm @confirm="handleDelete(scope.row.claimReportId)" title="你确定要删除吗？">     -->
          <el-popconfirm @confirm="openDelDialogue(scope.row.claimReportId)" title="你确定要删除吗？">
            <template #reference>
              <el-button size="small" type="danger" :plain="true">Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除对话框   -->
    <el-dialog
        v-model="info.dialogDelVisible"
        title=" 请填写删除原因 " width="30%"
        :before-close="dialogDelVisible"
        draggable>

      <el-form
          :model="info.sel"
          ref="ruleFormRef"
          :rules="rules"
          label-width="140px">
        <el-form-item label="删除原因" prop="cancellationReason">
          <el-input style="width:240px" v-model="info.sel.cancellationReason" />
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogDelVisible()">取消</el-button>
        <el-button type="primary" @click="handleDelete(ruleFormRef)">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div style="width: 100%">
      <br>
      <el-pagination
          v-model:current-page="info.sel.pageNum"
          v-model:page-size="info.sel.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :small="false"
          :disabled="disabled"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="info.total"
          @size-change="pagesChange($event)"
          @current-change="pagesChange($event)"
      />
    </div>
  </div>
</template>

<style scoped>
/* 使用 Flexbox 布局 */
.container {
  display: flex;
  justify-content: space-between; /* 将元素推到容器两端 */
  align-items: center; /* 垂直居中对齐 */
}

/* 将元素推到容器的右侧 */
.right-aligned {
   margin-left: auto;
}

/* 往元素左移动指定像素 */
.move-right {
  margin-right: 58px; /* 你想要的像素值 */
}
/* 表格文字内容居中 */
.el-table th.is-center, .el-table td.is-center {
  text-align: center;
}


</style>